<template>
  <div class="page">
    <div class="pic-box">
      <img src="../../assets/img/pic_login@2x.png" alt="">
    </div>
    <div class="form-box">
      <div class="phone-box vux-1px-b">
        <img src="../../assets/img/ic/user@2x.png" alt="">
        <input type="text" value="" v-model="username" placeholder="请输入手机号码">
        <img class="rightBtn" @click="cleanUserName" src="../../assets/img/ic/cleanup@2x.png" alt="" v-show="cleanUserNameBtn">
      </div>
      <div class="passwd-box vux-1px-b">
        <img src="../../assets/img/ic/password@2x.png" alt="">
        <input :type="pwdType" value="" v-model="passwd" placeholder="请输入密码">
        <img class="rightBtn" @click="showPasswd" src="../../assets/img/ic/see@2x.png" alt="" v-show="showPasswdBtn">
        <img class="rightBtn" @click="hidePasswd" src="../../assets/img/ic/conceal@2x.png" alt="" v-show="hidePasswdBtn">
      </div>
      <div class="forgetPwd-box">
        <a href="#">忘记密码?</a>
      </div>
    </div>
    <div class="subBtn-box">
      <button class="btn">登录</button>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        title:'登录',
        username: '',
        passwd: '',
        pwdType: 'password'
      }
    },
    computed: {
      cleanUserNameBtn(){
        if(this.username==''){
          return false
        }
        return true
      },
      showPasswdBtn(){
        if(this.passwd=='' || this.pwdType=='type'){
          return false
        }
        return true
      },
      hidePasswdBtn(){
        if(this.passwd=='' || this.pwdType=='password'){
          return false
        }
        return true
      }
    },
    created(){
      this.$store.commit('setTitle',this.title);
      this.$store.commit('setShowCloseBtn',true)
    },
    methods: {
      cleanUserName(){
        this.username = ''
      },
      showPasswd(){
        this.pwdType = 'type'
      },
      hidePasswd(){
        this.pwdType = 'password'
      }
    }
  }
</script>

<style lang="less" scoped>
.page{
  width: 100%;
  height: 100%;
  background: #ffffff;
}
.pic-box{
  width: auto;
  height: 320px;
  img{
    height: 100%;
    width: 100%;
  }
}
.form-box{
  padding: 0px 20px;
  img{
    width: 48px;
    height: 48px;
  }
  input{
    border: 0px;
    outline: none;
    margin-left: 10px;
    margin-top: 10px;
    font-size: 32px;
    height: 40px;
    line-height: 40px;
  }
}
.phone-box,.passwd-box{
  position: relative;
  height: 120px;
  line-height: 120px;
  .rightBtn{
    position: absolute;
    display: block;
    right: 0;
    top: 36px;
  }
}
.forgetPwd-box{
  padding-top: 18px;
  font-size: 26px;
  color: #65696D;
  text-align: right;
}
.subBtn-box{
  text-align: center;
  margin-top: 100px;
  button{
    border-radius: 100px;
  }
}
</style>
